import React, { Component } from "react";
import './Wofuzwderenwu.less'
import api from "./../../api";
import axios from "./../../utils/axios";
import { Button, Form, Input, Select, Table, DatePicker, Space, message } from "antd";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
export default class Wochuangjianderenwu extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      data: [],
      studentArr:[],
      task_id: "",
      task_status: "待提交",
      task_name: "",
      creator: "",
      principal:"",
      create_date: "",
      deadline: "",
      description:"",
      canyuname:"",
      voucher:"",
      currentPage:"",
      pageSize:"",
      emp_name:"",
      addvisble:true
    };
  }
  romref = React.createRef();
  formRef = React.createRef();
 
   //初始化渲染
   componentDidMount() {
    let {currentPage,pageSize,emp_name}=this.state;
    axios({
      url:api.Get_Wochuangjianderenwu,
      params:{currentPage,pageSize,emp_name}
    }).then(res=>{
      if (res.data.code === 200) {
              this.setState({
                data: res.data.data,
              });
            }
            if (res.data.code === 500) {
              this.error("数据库出错");
            }
          }).catch((err) => {
            console.log("数据出错", err);
    }).catch(error=>{
      console.log(error);
    })
  }
  del=(row)=>{
    console.log(row.task_id);
   let task_id=row.task_id;
    axios({
      url:api.Del_Wochuangjianderenwu,
      method:'post',
      params:{task_id}
    }).then((res)=>{
      if(res.data.code===200){
        console.log(row.task_id);
        message.success(res.message);
      }
      if(res.code.code===500){
        this.error("数据库出错")
      }
    }).catch((err)=>{
      console.log(err);
    })
  }
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onChange = (e) => {
    let key=e.target.dataset.key;
  this.setState({
    [key]:e.target.value
  })
  };
  changadd=()=>{
  this.setState({addvisble:false})
  }
  btnque=()=>{
    this.setState({addvisble:true})
    this.formRef.current.resetFields();
  }
  tianjiarenwu=()=>{
      let studentArr = {
        id:this.state.id,
        renname: this.state.renname,
        miaoshu: this.state.miaoshu,
        funame: this.state.funame,
        canyuname: this.state.canyuname,
        jiedate:this.state.jiedate,
      };
      this.setState({data:this.state.data.push(studentArr)})
      console.log(this.state.data,studentArr);
      this.setState({
        data: this.state.data,
        renname:"",
        miaoshu:"",
        funame:"",
        canyuname:"",
        jiedate:"",
        addvisble:true
      });
  }
  render() {
    let {task_name,principal,deadline,description,canyuname}=this.state
    const columns = [
      {
        title: "序号",
        dataIndex: "task_id",
        key: "task_id",
        fixed: "true",
        align: "center",
      },
      { 
        title: "任务状态",
        dataIndex: "task_status",
        key: "task_status",
        fixed: "true",
        align: "center",
        render:(_,res)=>{
          let state={
            0:"已完成",
            1:"待提交",
            2:"待审核",
            3:"审核拒绝"
        }
        return state[res.task_status]||"没有找到该状态"
        }
      },
      {
        title: "任务名称",
        dataIndex: "task_name",
        key: "task_name",
        align: "center",
      },
      {
        title: "截止日期",
        dataIndex: "deadline",
        key: "deadline",
        align: "center",
      },
      {
        title: "负责人",
        dataIndex: "principal",
        key: "principal",
        align: "center",
      },
      {
        title: "创建时间",
        dataIndex: "create_date",
        key: "create_date",
        align: "center",
      },
    
      {
        title: "操作",
        key: "operation",
        fixed: "true",
        render: (row) =>
        {
          let that=this;
        return <>
        <span className="actions" onClick={()=>that.del(row)}>删除</span>
         <span className="actions">查看详情</span>
         </>},
        align: "center",
      },
    ];
    return (
      <>
      {this.state.addvisble?<>
        <Form
          {...layout} ref={this.formRef} name="control-ref"  onFinish={this.onFinish} className="inpus">
          <Form.Item name="task_name" label="任务名称">
            <Input />
          </Form.Item>
          <Form.Item name="principal" label="负责人">
            <Input />
          </Form.Item>
          <Form.Item name="create_date" label="创建时间">
            <Space direction="vertical">
              <DatePicker placeholder="" />
            </Space>
          </Form.Item>
          <Form.Item name="task_status" label="任务状态">
            <Select allowClear onChange={this.onGenderChange} defaultValue="male" >
              <Option value="male">待提交</Option>
              <Option value="female">待审核</Option>
              <Option value="other">已完成</Option>
              <Option value="jujue">拒绝审核</Option>
            </Select>
          </Form.Item>  
          <Form.Item>
          </Form.Item>
          <Form.Item>
          </Form.Item>
        </Form>
         <div className="ant-btn-block">
            <Button type="primary" htmlType="submit">查询</Button>
            <Button htmlType="button" onClick={this.onReset}>重置</Button>
            </div>
            <div className="ant-btn-block">
           <Button type="primary" htmlType="submit" onClick={this.changadd}>创建任务</Button>
            </div>
      <Table columns={columns} dataSource={this.state.data} scroll={{}} rowKey={record => record.task_id}/>
      </>: 
      <>
      <Form
          {...layout} ref={this.formRef} name="control-ref"  onFinish={this.onFinish} >
          <Form.Item  label="任务名称"  >
            <Input name="task_name" value={task_name} onChange={this.onChange} data-key="renname"/>
          </Form.Item>
          <Form.Item label="任务描述" >
            <textarea  name="description" value={description} onChange={this.onChange} data-key="miaoshu" />
          </Form.Item>
          <Form.Item label="负责人" >
            <Input name="principal" value={principal} onChange={this.onChange} data-key="funame"/>
          </Form.Item>
          <Form.Item label="参与人"  >
            <Input name="canyuname" value={canyuname} onChange={this.onChange} data-key="canyuname"/>
          </Form.Item>
          <Form.Item  label="任务截止期限" >
          <Space direction="vertical" name="deadline" onChange={this.onChange} data-key="deadline">
              <DatePicker placeholder="" value={deadline} />
            </Space>
          </Form.Item>  
        </Form>
         <div className="ant-btn-block">
            <Button type="primary" htmlType="submit" onClick={this.tianjiarenwu}>保存</Button>
            <Button htmlType="button" onClick={this.btnque}>取消</Button>
            </div>
            </>}
      </>
    );
  }
}